<template>
    <div class="task-list-wrapper">
        <div class="tool-box">
            <div class="task-tool-btn active" @click="toggleTab($event, '进行中')">进行中</div>
            <div class="task-tool-btn" @click="toggleTab($event, '已完成')">已完成</div>
            <div class="task-tool-btn" @click="toggleTab($event, '')">所有</div>
            <div class="task-tool-btn" @click="addNew">
                <i class="fa fa-calendar-plus-o"></i>  新建
            </div>
            
        </div>
        <div class="list">
            <ul>
                <li v-for="(item, index) in list" class="item" :key="index">
                    <div>
                        <span>{{item.state}}</span>
                        <div :style="`background:${item.state=='已完成'?'#32c332':''}`"></div>
                    </div>
                    <div>
                        <span>{{dateFormat(item.date, 'ymd')}}</span><br>
                        <span>{{dateFormat(item.time, 'hm')}}</span>
                    </div>
                    <div>{{item.content}}</div>
                    <div>
                        <el-button style="font-size: 16px;color:#ea131" v-if="item.state=='进行中'" title="完成" size="mini" @click="finish(item)" type="text"><i class="fa fa-check"></i></el-button>
                        <el-button style="font-size: 16px;color:#ea131" size="mini" @click="del(item)" type="text"><i class="fa fa-trash"></i></el-button>
                    </div>
                    <div style="border-bottom: 2px solid #dfe4ed;width: 100%;margin:5px 0" class="clear-float"></div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {dateFormat} from '../../scripts/until'

export default {
    name: 'taskList',
    data: function() {	
        return {
        }
    },
    props:{
        list: {
            default: []
        },
        height:{
            default: '549px'
        },
        width:{
            default: '598px'
        }
    },
    methods: {
        dateFormat(date, type){
            // date = new Date(date);
            // console.log(this.list,date,date.getMinutes())
            return dateFormat(date, type)
        },
        toggleTab($event, val) {
            this.$emit('toggle', val);
            document.querySelectorAll('.task-tool-btn').forEach( item => {
                item.classList.remove('active')
            })
            $event.currentTarget.classList.add('active')
        },
        addNew(){
            this.$emit('add-new');
        },
        finish(item){
            this.$emit('finish', item);
        },
        del(item){
            this.$emit('del', item);
        }
    },
    mounted(){
        this.$el.style.height=this.height
        this.$el.style.width=this.width
    }
}
</script>

<style lang="scss">
.task-list-wrapper{
    border: 2px solid #2873a6;
    border-left: none;
    .tool-box{
        display: flex;
        height: 44px;
        background: #2873a6;
        color: #fff;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        .task-tool-btn{
            cursor: pointer;
            color:#fff;background:#2873a6;width:100%;height: 100%;
            text-align: center;
            line-height: 40px;
        }
        .active:before{
            // color: #ccc;
            content: '';
            display: inline-block;
            height: 10px;
            width: 10px;
            background: #fff;
            border-radius: 50%;
            margin-right: 5px;
        }
    }
    .list{
        height: 500px;
        overflow: auto;
        padding: 5px;
        .item{
            &:last-child{
                .clear-float{
                    display: none;
                }
            }
            line-height: 35px;
            // font-family: '微软雅黑';
            div{
                float: left;
                height: 100%;
                // padding: 10px 0;
            }
            &>div:nth-child(1){
                width: 15%;
                position: relative;
                &>div{
                    z-index: 1;
                    position: absolute;
                    top: 5px;
                    left: 0;
                    text-align: center;
                    font-size: 12px;
                    background: #409EFF;
                    border-radius: 3px;
                    width: 45px;
                    height: 24px;
                    padding-bottom: 5px;
                }
                &>span{
                    color: #fff;
                    font-size: 10px;
                    position: absolute;
                    z-index: 2;
                    left: 5px;
                }
            }
            &>div:nth-child(2){
                margin-left: 10%;
                width: 20%;
            }
            &>div:nth-child(3){
                width: 55%;
            }
            &>div:nth-child(4){
                margin-left: 5%;
                width: 8%;
            }
        }
    }
}
</style>